<template>
    <!-- 标题 -->
    <van-nav-bar title="主页"  fixed />
    <div style="height: 45px;"></div>
    <!-- 搜索框 -->
    <Search></Search>
    <!-- 轮播图 -->
    <Swiper></Swiper>
    <h3>秒杀频道</h3>
    <!-- 其他 -->
    <div class="menu">

    </div>
    <!-- 导航 -->
    <h3>热门分类</h3>
    <van-grid :column-num="4">
        <van-grid-item v-for="item in catitemsList" :icon="item.image_src" :text="item.name" />
    </van-grid>
    <h3>猜你喜欢</h3>
    <div v-for="item in floorList">
        <img :src="item.floor_title.image_src" style="width: 100%;" alt="">
        <div v-for="items in item.product_list">
            <img :src="items.image_src" style="width: 120px;height: 120px;float: left;margin: 2px;" alt="">
        </div>
    </div>
    <!-- 楼层 -->
</template>

<script setup>
import { ref } from 'vue'
// 引入轮播图组件
import Swiper from '@/components/Swiper.vue'
// 引入搜索框组件
import Search from '@/components/Search.vue'
// 引入 楼层接口 和 导航接口
import { catitemsApi, floorApi } from '@/api/api'
// 自定义导航数据
let catitemsList = ref([])
catitemsApi().then(res => {
    console.log('导航数据', res)
    catitemsList.value = res.data.message
})
// 自定义楼层数据
let floorList = ref([])
floorApi().then(res => {
    console.log('楼层数据', res)
    floorList.value = res.data.message
})
</script>

<style lang="scss" scoped>
.menu {
    width: 100%;
    height: 150px;
    background: red;
}
</style>